<!DOCTYPE html>
<html   xmlns="http://www.w3c.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:p="http://primefaces.org/ui"
        xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <style type="text/css">
            .slot {
            background:#FF9900;
            width:64px;
            height:96px;
            display:block;
            }
        </style>
    </h:head>
    <h:body>
        <p:outputPanel id="slot" styleClass="slot">
            <p:droppable />
        </p:outputPanel>
        
        <p:graphicImage width="50px" height="50px" id="messi" value="http://i.telegraph.co.uk/multimedia/archive/02617/bitch_2617955b.jpg" />
        <p:draggable for="messi"/>
        <p:outputPanel id="zone" styleClass="slot"/>
        <p:droppable for="zone">
            <p:ajax listener="#{droppableBean.onDrop}" />
        </p:droppable>

    </h:body>
</html>
